import { MyContext } from "./context";
import "./css/App.css";
import React, { useEffect } from "react";
import { createModal } from "./components/Modal";
import { ErrorBoundary } from "./components/ErrorBoundary";

const useMousePosition = () => {
  const [point, setPoint] = React.useState({ x: 0, y: 0 });
  useEffect(() => {
    const handleMouseMove = (e) => {
      setPoint({ x: e.clientX, y: e.clientY });
    };
    window.addEventListener("mousemove", handleMouseMove);
    return () => {
      window.removeEventListener("mousemove", handleMouseMove);
    };
  }, []);
  return point;
};

function App() {
  const { Provider } = MyContext;
  const [count, setCount] = React.useState(1);

  return (
    <ErrorBoundary>
      <Provider value={{ count, setCount }}>
        <button onClick={() => setCount("www")}>APP_click</button>
        <p>APP_COUNT::{count}</p>
        <ErrorBoundary>{count < 10 && <ChildCom />}</ErrorBoundary>
      </Provider>
    </ErrorBoundary>
  );
}

// function Modal(){}
class Modal {
  ref = null;
  modal = null;
  width = 300;
  height = 200;
  container = null;
  clickPosition = { x: 0, y: 0 };
  constructor(container, width = 200, height = 200) {
    this.container = container;
    this.width = width;
    this.height = height;
    // 创建弹窗
  }
  open(event) {
    // 当前点击的位置
    this.clickPosition = {
      x: event.clientX,
      y: event.clientY,
    };
    // 弹窗位置
    let targetPosition = {
      x: window.innerWidth / 2 - this.width / 2,
      y: window.innerHeight / 2 - this.height / 2,
    };
    console.log("弹窗最终位置", targetPosition);
  }
}

function ChildCom() {
  const modal = new Modal();
  const { count, setCount, setCountsetCount } = React.useContext(MyContext);
  const [count2, setCount2] = React.useState(1);
  // const point = useMousePosition();
  setCount2(count * 4);
  return (
    <div>
      <button onClick={() => setCountsetCount(count + 1)}>
        ChildCom_click
      </button>
      <p>CHILD+COM_COUNT::{count2}</p>{" "}
      <p>{/* MousePosition::{point.x},{point.y} */}</p>
      <button onClick={(event) => modal.open(event)}>展开弹窗</button>
    </div>
  );
}

export default App;
